<template>
  <div>
    <el-row align="middle" class="mytop">
      <el-col :span="4">
        <el-input v-model="water.pipelineId" placeholder="流水编号"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="water.rtype" placeholder="请选择流水类型">
          <el-option
            key="''"
            label="全部"
            value=""></el-option>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button @click="search" icon="el-icon-search"></el-button>
      </el-col>
    </el-row>
    <el-table
      :data="waterList" style="width: 100%">
      <el-table-column property="pipelineId" label="流水编号" width="120"></el-table-column>
      <el-table-column property="accountIdUsers.uname" label="付钱用户名称" width="120"></el-table-column>
      <el-table-column property="uidUsers.uname" label="收钱用户名称" width="120"></el-table-column>
      <el-table-column property="rmoney" label="流水金额" width="120"></el-table-column>
      <el-table-column property="rdate" label="流水日期"></el-table-column>
      <el-table-column label="流水类型" width="120">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.rtype==1">订单付款</el-tag>
          <el-tag type="success" v-if="scope.row.rtype==2">订单退款</el-tag>
          <el-tag type="success" v-if="scope.row.rtype==3">结算商户月营收</el-tag>
          <el-tag type="success" v-if="scope.row.rtype==4">采购商品</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-button icon="el-icon-refresh-right" circle @click="search"></el-button>
        </template>
        <template slot-scope="scope">
          <el-link
            type="primary"
          >查看详情
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageno"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
    export default {
        name: "waterQuery",
        data(){
          return{
            water:{
              pipelineId:"",
              rtype:"",
              isDelete:0
            },
            waterList:[],
            options: [{
              value: '1',
              label: '订单付款'
            }, {
              value: '2',
              label: '订单退款'
            }, {
              value: '3',
              label: '结算商户月营收'
            }, {
              value: '4',
              label: '采购商品'
            }],
            pageno: 1,
            pagesize: 5,
            total: 1
          }
        },
        methods:{
          getData(){
            let params=new URLSearchParams();
            params.append("pageno", this.pageno);
            params.append("pagesize", this.pagesize);
            Object.keys(this.water).forEach(item=>{
              params.append(item,this.water[item]);
            })
            //异步，分页查询
            this.$axios.get("companyRunningWater_queryPage.action",{params:params}).
            then((response)=> {   //异步调用成功执行
              //将查询到的数据存入对象数组中
              this.waterList=response.data.records;
              this.total = response.data.total;
            }).catch(function (error) {//异步调用失败执行
              alert(error);
            });
          },
          search() {
            this.getData();
          },
          handleSizeChange(val) {
            //每页范围
            this.pagesize = val;
            this.getData();
          },
          handleCurrentChange(val) {
            //当前页
            this.pageno = val;
            this.getData();
          }
        },
        created() {
          this.getData();
        }
    }
</script>

<style scoped>

</style>
